import React from 'react';
import { Slider, Select, InputNumber, Checkbox } from 'antd';
import ColorPicker from '@/components/ColorPicker';
import style from './CanvasContainer.css';
// 特殊处理strokeDasharray字段
function getDashArrayString(key, arr, value){
    arr[key] = value;
    return arr.join(',');
}

function AttrListItem({ attrs, data, onUpdateAttr }){
    let { text, key, parentKey, controlType, options, minValue, maxValue, defaultValue } = data;
    let dashArray = [];
    if ( parentKey === 'strokeDasharray' && attrs['strokeDasharray'] ) {
        dashArray = attrs['strokeDasharray'].split(',')
    }
    return (
        <div className={style['list-item']}>
            <div className={style['list-item-label']}>{ text }</div>
            <div className={style['list-item-content']}>
                {
                    controlType === 'color' 
                    ?
                    <ColorPicker color={parentKey && attrs[parentKey] ? attrs[parentKey][key] : attrs[key]} onChange={color=>{
                        onUpdateAttr(key, parentKey, color);
                    }}/>
                    :
                    controlType === 'slider' 
                    ?
                    <Slider 
                        value={ parentKey && attrs[parentKey] ? parentKey === 'strokeDasharray' ? dashArray[key] : attrs[parentKey][key] : attrs[key]  } 
                        // disabled={parentKey && !attrs[parentKey] ? true : false } 
                        min={minValue} 
                        max={maxValue} 
                        step={1}
                        onChange={value=>onUpdateAttr(key, parentKey, parentKey === 'strokeDasharray' ? getDashArrayString(key, dashArray, value) : value, parentKey === 'strokeDasharray' ? 'string' : null )} 
                    />
                    :
                    controlType === 'select'
                    ?
                    <Select 
                        value={parentKey && attrs[parentKey] ? attrs[parentKey][key] : attrs[key]}
                        options={options}
                        onChange={value=>onUpdateAttr(key, parentKey, value)}
                    />
                    :
                    controlType === 'checkBox' 
                    ?
                    <Checkbox 
                        checked={( parentKey && attrs[parentKey] ? attrs[parentKey][key] : attrs[key] ) ? true : false} 
                        onChange={e=>onUpdateAttr(key, parentKey, e.target.checked ? defaultValue : null )} 
                    />
                    :
                    null
                }
            </div>
        </div>
    )
}

export default AttrListItem;